<template>
  <div class="code-container" ref="container">
    <slot></slot>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";
import { language as mysqlLanguage } from "monaco-editor/esm/vs/basic-languages/mysql/mysql.js";

export default {
  props: {
    code: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      monacoEditor: {}
    };
  },
  methods: {
    // 初始化
    init() {
      this.monacoEditor = monaco.editor.create(this.$refs.container, {
        value: this.code, // 代码
        readOnly: false, // 只读
        language: "mysql", // 语法
        theme: "vs-dark", // 主题            vs/vs-dark/hc-black （可使用defineTheme中的主题）
        folding: true, // 代码折叠
        position: false,
        showFoldingControls: "mouseover",//   折叠图标显示     mouseover/always
        quickSuggestions: true, //  支持搜索         ctrl + F
        automaticLayout: true, //resize自动布局
        cursorStyle: "line", //  光标样式         line/block/underline/line-thin/block-outline/underline-thin
        roundedSelection: true //  控制选区是否有圆角
      });
    },
    // 右击菜单项 + 快捷键
    addAction() {
      // 格式化文档（右击菜单项 + 快捷键）
      this.fmtSql();
      // 保存（快捷键）
      this.save();
    },
    save() {
      let that = this;
      this.monacoEditor.addCommand(
        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
        () => {
          console.log("save");
          console.log(`总行数：${this.monacoEditor.getModel().getLineCount()}`);
          console.log(`内容打印：${that.monacoEditor.getValue()}`);
        }
      );
    },
    fmtSql() {
      this.monacoEditor.addAction({
        id: "formatDocument", //   菜单项 id
        label: "格式化文档", //  菜单项名称
        //  绑定快捷键
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F
        ],
        contextMenuGroupId: "formatDocument", // 所属菜单的分组  //9_cutcopypaste
        run: () => {
          // let sqlContent = sqlFormatter.format(this.monacoEditor.getValue());
          // this.replaceContent(sqlContent);
        } // 点击后执行的操作
      });
    },
    // 修改内容
    replaceContent(text) {
      this.monacoEditor.executeEdits("SELECT", [
        {
          range: {
            startLineNumber: 0,
            startColumn: 0,
            endLineNumber: Infinity,
            endColumn: Infinity
          },
          text
        }
      ]);
    },
    // 注册语法提示
    registerMysql() {
      monaco.languages.registerCompletionItemProvider("mysql", {
        provideCompletionItems: function (model, position) {
          var textUntilPosition = model.getValueInRange({
            startLineNumber: position.lineNumber,
            startColumn: 1,
            endLineNumber: position.lineNumber,
            endColumn: position.column
          });
          var match = textUntilPosition.match(/(\S+)$/);
          if (!match) return [];
          match = match[0].toUpperCase();
          var suggestions = [];
          //                                                                        关键词
          mysqlLanguage.keywords.forEach(item => {
            if (item.indexOf(match) !== -1) {
              suggestions.push({
                label: item,
                kind: monaco.languages.CompletionItemKind.Keyword,
                insertText: item
              });
            }
          });
          //                                                                        算法
          mysqlLanguage.operators.forEach(item => {
            if (item.indexOf(match) !== -1) {
              suggestions.push({
                label: item,
                kind: monaco.languages.CompletionItemKind.Operator,
                insertText: item
              });
            }
          });
          //                                                                        内置函数
          mysqlLanguage.builtinFunctions.forEach(item => {
            if (item.indexOf(match) !== -1) {
              suggestions.push({
                label: item,
                kind: monaco.languages.CompletionItemKind.Function,
                insertText: item
              });
            }
          });
          return {
            suggestions
          };
        }
      });
    }
  },
  mounted() {
    // 初始化
    this.init();
    this.addAction();
    // monaco.editor.setTheme("dark");
    // 注册MySQL语法提示
    this.registerMysql();
    this.$nextTick(() => {
      this.monacoEditor.setValue("SELECT * FROM `sys_table_config`"); //              设置默认值
    });
    // 禁用默认事件

    /**
     * ============================================================================
     *                                   (/^▽^)/
     *                                EVENT LISTENER!
     * ============================================================================
     */
    // 实时更新
    this.monacoEditor.onDidChangeModelContent(() => {
      let value = this.monacoEditor.getValue();
      this.$emit("change", value);
    });
    // 显示行列
    this.monacoEditor.onDidChangeCursorPosition(e => {
      console.log(`行 ${e.position.lineNumber}，列 ${e.position.column}`);
    });

    window.addEventListener("beforeunload", function (e) {
      e.preventDefault();
      e.returnValue = "Do you sure";
    });
  }
};
</script>

<style>
.code-container {
  height: 100%;
  overflow: hidden;
}
</style>
